<template>
    <view class="content-list">
        <uv-steps direction="column" activeColor="#E7E7E7" inactiveColor="#E7E7E7">
            <uv-steps-item v-for="(item, index) in list" :key="index" >
                <template v-slot:icon>
                    <view class="icon-box">

                    </view>
                </template>
                <template v-slot:title>
                    <text class="time" @click="seeDetail(item)">{{ item.createTime }}</text>
                </template>
                <template v-slot:desc>
                    <view class="title" @click="seeDetail(item)">{{ item.title }}</view>
                    <view class="content" @click="seeDetail(item)" v-if="item.summary">{{ item.summary }}</view>
                    <view class="tags" @click="seeDetail(item)">
                        <view class="tag-item" v-for="(tag, index) in item.tagList" :key="index">
                            {{ tag.name }}
                        </view>
                    </view>
                </template>
            </uv-steps-item>
        </uv-steps>
    </view>
</template>
<script>

export default {
    props: {
        list: {
            type: Array,
            default: () => []

        }
    },
    data() {
        return {

        }
    },
    methods: {
        seeDetail(item) {
            uni.navigateTo({
                url: `/pagesAircle/content/index?id=${item.id}`
            })
        }
    }
} 
</script>
<style lang="scss">
/deep/ .uv-steps-item__line--column {
    // background-color: pink !important;
}


.content-list {
    z-index: 2;

    .icon-box {
        width: 10rpx;
        height: 10rpx;
        background: #488AFD;
        box-shadow: 0rpx 0rpx 6rpx 0rpx #488AFD;
    }

    .time {
        font-weight: 400;
        font-size: 26rpx;
        color: #999999;
        margin-bottom: 16rpx;
    }

    .title {
        font-weight: 600;
        font-size: 30rpx;
        color: #333333;
        /* 新增省略号样式 */
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .content {
        font-weight: 400;
        font-size: 26rpx;
        color: #666666;
        margin-top: 20rpx;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .tags {
        display: flex;
        margin-top: 20rpx;
        margin-bottom: 10rpx;
        .tag-item {
            background: #F6F9F8;
            border-radius: 6rpx;
            font-size: 26rpx;
            color: #999999;
            padding: 6rpx 10rpx;
            margin-right: 20rpx;
        }
    }
}
</style>